<template>
  <div class="home">
    <div class="home-head">
      <div class="home-head-heading">
        <div class="home-head-heading-title">工作台</div>
      </div>
      <div class="home-head-content">
        <div class="home-head-content-row">
          <div class="home-head-content-row__content">
            <div class="page-header-content">
              <div class="avatar">
                <span>
                  <img :src="avatar"/>
                </span>
              </div>
              <div class="content">
                <div class="content-title"> {{ welcome }}，{{ user.nickName }}</div>
                <div>{{ user.dept && user.dept.deptName }}</div>
              </div>
            </div>
          </div>

          <div class="home-head-content-row__extraContent" v-if="false">
            <div class="extra-content">
              <div class="stat-item">
                <div class="ant-statistic">
                  <div class="ant-statistic-title">本月订单数</div>
                  <div class="ant-statistic-content">
                    <span class="ant-statistic-content-value">
                      <span class="ant-statistic-content-value-int">{{ count.monthNum }}</span>
                    </span>
                  </div>
                </div>
              </div>

              <div class="stat-item">
                <div class="ant-statistic">
                  <div class="ant-statistic-title">未完结订单/总订单数</div>
                  <div class="ant-statistic-content">
                    <span class="ant-statistic-content-value">
                      <span class="ant-statistic-content-value-int">{{ count.notCompletedNum }}</span>
                    </span>
                    <span class="ant-statistic-content-suffix">/ {{ count.totalNum }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-main">
      <div class="home-block1">
        <div class="home-block1-left">
          <div class="home-block1-wrap">

          </div>
          <div class="home-block1-wrap">

          </div>
          <div class="home-block1-wrap">

          </div>
        </div>
        <div class="home-block1-right">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/api/system/user'



export default {
  name: 'Index',
  components: {

  },
  data() {
    return {
      user: {},
      activeCard: '',
      count: {
        monthNum: 0,
        notCompletedNum: 0,
        totalNum: 0
      }
    }
  },
  created() {
  },
  methods: {
    init() {
      this.getUser()
      this.countOrder()
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    },
    async countOrder() {
      // const res = await getOrderStatistics({})
      // this.count = res.data
    }
  },
  computed: {
    ...mapGetters(['avatar']),
    welcome() {
      let txt = ''
      const housr = new Date().getHours()
      if (housr < 8) {
        txt = '凌晨好'
      } else if (housr < 12) {
        txt = '上午好'
      } else if (housr < 18) {
        txt = '下午好'
      } else {
        txt = '晚上好'
      }

      return txt
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.home {
  font-size: 14px;
  height: calc(100vh - 84px);
  background: #F0F2F5;
  overflow: auto;

  &-head {
    background: #FFF;
    padding: 20px;

    &-heading {
      width: 100%;
      overflow: hidden;

      &-title {
        display: block;
        float: left;
        margin-bottom: 0;
        padding-right: 12px;
        color: rgba(0, 0, 0, .85);
        font-weight: 600;
        font-size: 20px;
        line-height: 32px;
      }
    }

    &-content {
      padding-top: 12px;
      overflow: hidden;

      &-row {
        display: flex;
        width: 100%;

        &__content {
          flex: 1;
        }

        &__extraContent {
          min-width: 242px;
          margin-left: 88px;
          text-align: right;
        }
      }

    }
  }

  .page-header-content {
    display: flex;

    .avatar {
      flex: 0 1 72px;

      & > span {
        display: block;
        width: 72px;
        height: 72px;
        border-radius: 72px;
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
      }
    }

    .content {
      position: relative;
      top: 4px;
      margin-left: 24px;
      line-height: 22px;
      color: rgba(0, 0, 0, .45);
      flex: 1 1 auto;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: rgba(0, 0, 0, .85);
      }
    }
  }

  .extra-content {
    zoom: 1;
    float: right;
    white-space: nowrap;

    &:before {
      display: table;
      content: " ";
    }

    &:after {
      height: 0;
      clear: both;
      font-size: 0;
      visibility: hidden;
    }

    .stat-item {
      position: relative;
      display: inline-block;
      padding: 0 32px;

      &:after {
        position: absolute;
        top: 8px;
        right: 0;
        width: 1px;
        height: 40px;
        background-color: #e8e8e8;
        content: "";
      }
    }

    .ant-statistic {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: "tnum";

      &-title {
        margin-bottom: 4px;
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
      }

      &-content {
        color: rgba(0, 0, 0, .85);
        font-size: 24px;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

        &-suffix {
          margin-left: 4px;
          font-size: 16px;
        }
      }
    }
  }


  &-main {
    margin: 10px;
    //height: calc(100% - 200px);
    overflow-y: auto;
  }


}

.home-block1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;

  ::v-deep {
    .sys-title {
      background-color: transparent;
    }
  }

  &-left {
    flex: 1;
  }
  &-right {
    margin-left: 10px;
    background-color: #FFF;
    width: 40%;
  }

  &-wrap {
    background-color: #FFF;
    min-height: 200px;

    & + .home-block1-wrap {
      margin-top: 10px;
    }
  }
}


</style>

